<template>
  <div class="checkin-card">
    <div class="checkin-header">
      <span class="checkin-title">连续打卡</span>
      <span class="checkin-streak">{{ streak }} 天</span>
    </div>
    <button
      class="checkin-btn"
      :disabled="checkedIn"
      @click="handleCheckin"
    >
      {{ checkedIn ? '今日已打卡' : '立即打卡' }}
    </button>
    <div class="checkin-tip" v-if="checkedIn">明天记得继续哦！</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import service from '@/utils/request'

const streak = ref(0)
const checkedIn = ref(false)

async function fetchCheckinStatus() {
  try {
    const res = await service.get('/sport/checkin/')
    streak.value = res.streak
    const today = new Date().toISOString().slice(0, 10)
    checkedIn.value = res.records.some(r => r.date === today)
  } catch (e) {
    streak.value = 0
    checkedIn.value = false
  }
}

onMounted(fetchCheckinStatus)

async function handleCheckin() {
  try {
    await service.post('/sport/checkin/', { note: '' })
    await fetchCheckinStatus() // 打卡成功后刷新状态
    alert('打卡成功')
  } catch (e) {
    // 优先显示后端返回的 msg
    alert(e.response?.data?.msg || '打卡失败')
  }
}
</script>

<style scoped>
.checkin-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(114,46,209,0.08);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1 1 0;
  /* 保证和统计卡片等高 */
  height: 100%;
}
.checkin-header {
  font-size: 18px;
  margin-bottom: 12px;
  color: #722ed1;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.checkin-title {
  font-weight: bold;
}
.checkin-streak {
  font-size: 22px;
  font-weight: bold;
}
.checkin-btn {
  margin-top: 8px;
  padding: 8px 32px;
  background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.checkin-btn:disabled {
  background: #eee;
  color: #aaa;
  cursor: not-allowed;
}
.checkin-tip {
  margin-top: 10px;
  color: #52c41a;
  font-size: 14px;
}
</style> 